<template>
  <div class="mod-prod-info">
    <el-form :model="tprojectMain"
             ref="dataForm"
             label-width="100px">

      <el-form-item label="项目图片">
          <mul-pic-upload v-model="tprojectMain.projectpicmain" />
      </el-form-item>

      <el-form-item label="项目名称"
                    prop="pname"
                    :rules="[
                      { required: true, message: '项目名称不能为空'}
                    ]">
        <el-col :span="8">
          <el-input v-model="tprojectMain.pname"
                    placeholder="项目名称"
                    maxlength="50"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="项目地址"
                    prop="address"
                    :rules="[
                      { required: false, message: '项目地址不能为空'}
                    ]">
        <el-col :span="8">
          <el-input v-model="tprojectMain.address"
                    placeholder="项目地址"
                    maxlength="100"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="开盘时间" prop="openingtime">
        <el-col :span="8">
        <el-input v-model="tprojectMain.openingtime"
                  type="datetime"
                  value-format="yyyy-MM-dd"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="交房时间" prop="deliverytime">
        <el-col :span="8">
        <el-input v-model="tprojectMain.deliverytime"
                  type="datetime"
                  value-format="yyyy-MM-dd"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="单价">
        <el-col :span="8">
        <el-input v-model="tprojectMain.price"
                  type="number"
                  step="1"
                  placeholder="请输入价格">
        </el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="楼盘特点"
                    prop="bstyle":rules="[
                      { required: true, trigger: 'blur' }
                    ]">
        <el-col :span="8">
          <el-input v-model="tprojectMain.bstyle"
                    type="textarea"
                    :autosize="{minRows: 2, maxRows: 4}"
                    placeholder="楼盘卖点"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="售楼处地址"
                    prop="salesaddress"
                    :rules="[
                      { required: false, message: '售楼处地址不能为空'}
                    ]">
        <el-col :span="8">
          <el-input v-model="tprojectMain.salesaddress"
                    placeholder="项目地址"
                    maxlength="100"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="产权年限" prop="ownership">
        <el-col :span="8">
          <el-input v-model="tprojectMain.ownership"
                    placeholder="产权年限"
                    maxlength="20"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
          <el-button
              @click="addCert()">增加许可证</el-button>
        <el-button
            @click="saveCert()">保存许可证</el-button>
        <projectprecert-table  ref="projectPrecerttable"  v-model="tProjectPresalecerts" >
        </projectprecert-table>
      </el-form-item>

      <el-form-item>
          <el-button
              @click="addBuild()">增加楼栋信息</el-button>
        <el-button
            @click="saveBuild()">保存楼栋信息</el-button>
        <projectbuilding-table  ref="projectBuildingtable" v-model="tProjectBuildings" >
        </projectbuilding-table>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   @click="dataFormSubmit()">确定</el-button>
      </el-form-item>
    </el-form>
    <projectbuilding ref="buildmod" v-if="projectbuildingVisible" @refreshBuilding="getDataList">
    </projectbuilding>
    <projectcert ref="certmod" v-if="projectcertVisible" @refreshCert="getDataList">
    </projectcert>

  </div>


</template>

<script>
import MulPicUpload from '@/components/mul-pic-upload'
import TinyMce from '@/components/tiny-mce'
import projectprecertTable from './projectprecert-table'
import projectbuildingTable from './projectbuilding-table'
import projectbuilding from './projectbuilding'
import { Debounce } from '@/utils/debounce'
import { getUUID } from '@/utils'
import projectcert from './projectcert';
export default {
  data () {
    return {
      pid: "",
      projectbuildingVisible: false,
      projectcertVisible: false,
      // 项目信息列表
      tprojectMain: {
        pid: "",
        projectpicmain: "",
        pname: "",
        address: "",
        deliverytime: "",
        price: 0,
        bstyle: "",
        salesaddress: "",
        ownership: "",
        openingtime: ""
      },
      tProjectBuildings: [],
      tProjectPics: [],
      tProjectPresalecerts: [],
      dataForm: {

      },
      tags: [],
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL
    }
  },
  components: {
    projectcert,
    MulPicUpload,
    TinyMce,
    projectprecertTable,
    projectbuildingTable,
    projectbuilding
  },
  computed: {
  },
  activated () {
    console.info("pid")
    console.info(this.$route.query.pid)
    this.dataForm.pid = this.$route.query.pid
    console.info(this.dataForm.pid)
    this.getDataList()
  },
  methods: {
    // 获取分类数据
    getDataList () {
        console.info("this.dataform")
        console.info(this.dataForm)
        if (this.dataForm.pid) {
          // 获取项目数据
          this.$http({
            url: this.$http.adornUrl(`/project/info/${this.dataForm.pid}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            console.info("数据....")
            console.info(data)
            this.tprojectMain = data.tProjectMain;
            this.tProjectBuildings = data.tProjectBuildings;
            this.tProjectPresalecerts = data.tProjectPresalecerts;
          })
        } else {
          this.$nextTick(() => {
            this.$refs['dataForm'].resetFields()
            this.dataForm.pic = ''
            this.dataForm.imgs = ''
          })
        }
    },
    getBuildList() {
      this.$http({
        url: this.$http.adornUrl(`/project/getProjectBuildinglist`),
        method: 'post',
        params: this.$http.adornParams(
            {
              pid: this.dataForm.pid
            }
        )
      }).then(({data}) => {
        this.dbSpecs = data
      }).catch(({data}) =>{
        console.info(data)
      })
    },
    getCertList() {
      let param = {pid : this.dataForm.pid||0}
      console.info("子组件的获取参数")
      console.info(param)
      this.$http({
        url: this.$http.adornUrl(`/project/getProjectPresalecertlist`),
        method: 'post',
        params: this.$http.adornParams(
            param
        )
      }).then(({data}) => {
        this.tProjectPresalecerts = data.data;
      }).catch(
          ({data}) => {
            console.info(data)
      })
    },
    addBuild() {
      this.projectbuildingVisible = true
      this.$nextTick(() => {
        this.$refs.buildmod.init(this.dataForm.pid);
      })
    },
    addCert() {
      this.projectcertVisible = true
      this.$nextTick(() => {
        this.$refs.certmod.init(this.dataForm.pid);
      })
    },
    saveBuild() {
      console.info()
    },
    saveCert() {
      console.info(this.tProjectPresalecerts)
      this.$http({
        url: this.$http.adornUrl('/project/savePresalecerts'),
        method: 'post',
        params: this.$http.adornParams(
            this.tProjectPresalecerts
        )
      }).then(({data}) => {
        console.info(data)
        this.getDataList()
      })
    },
    // 表单提交
    dataFormSubmit: Debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        if (!this.tprojectMain.projectpicmain) {
          this.errorMsg('请选择图片上传')
          return
        }
        if (!this.tprojectMain.pname) {
          this.errorMsg('请输入项目名称')
          return
        }
        // 参数进行保存
        let paramMain = Object.assign({}, this.tprojectMain)
        let pics = this.tprojectMain.projectpicmain.split(',')||[];
        if(pics.length>0)
        {
         paramMain.projectpicmain = [0]
        }

        //如果PID为空则赋值一个新的PID走保存模式
        if (!paramMain.pid) {
          paramMain.pid = getUUID()
        }

        const paraPics = [];
        for(var i=0;i<pics.length;i++)
        {
          let paraPics = {};
          paraPics.pid = paramMain.pid;
          paraPics.picid = Date.now();
          paraPics.picorder = i++;
          paraPics.picurl = pics[i];
          if(i===0)
          {
            paraPics.pictype = '1'
          }else{
            paraPics.pictype = '2'
          }
          paraPics.push(paraPics);
        }

        let param = {};
        param.tprojectMain = paramMain;
        param.tProjectPics = paraPics;

        console.info(param);

        // 设置价格和库存
        this.$http({
          url: this.$http.adornUrl('/project/saveProjectMain'),
          method: 'post',
          params: this.$http.adornParams(
              param
          )
        }).then(({data}) => {
          console.info(data)
          this.dataList = data.records
          this.page.total = data.total
          this.dataListLoading = false
          if (done) {
            done()
          }
        })
      })
    }),
    errorMsg (message) {
      this.$message({
        message: message,
        type: 'error',
        duration: 1500
      })
    }
  }
}
</script>
